<template>
	<u-popup :show="show" @close="close">
		<view :style="'height:' + winHeight">
			<view class="img">
				<image class="pic" :src="goodDetail.carousel_image_list[0].image_url"></image>
			</view>
			<view class="con">
				<view class="introduce">
					<text>{{flag? goodDetail.name: goodDetail.name_en}}</text>
					<text>-</text>
					<text>￥ {{goodDetail.sku[0].specification_list[0].price}}</text>
					<text>-</text>
					<view class="taste">
						<text v-if="flag">口味</text>
						<text v-else>Taste</text>
						<text
							style="font-size: 13px; margin-top: 5px;">{{flag? goodDetail.sku[0].flavor_name: goodDetail.sku[0].flavor_name_en}}</text>
					</view>
					<text>-</text>
					<view class="dimension">
						<text v-if="flag">尺寸</text>
						<text v-else>Size</text>
						<text
							style="font-size: 13px; margin-top: 5px;">{{goodDetail.sku[0].specification_list[0].specification_name}}</text>
						<text
							style="font-size: 13px;">{{flag? goodDetail.sku[0].specification_list[0].proposal: goodDetail.sku[0].specification_list[0].proposal_en}}</text>
					</view>
				</view>
			</view>
			<view class="footer">
				<u-icon name="server-fill" size="28"></u-icon>
				<button v-if="flag" class="shopping" size="mini" :plain="true" @click="addToCart">加入购物车</button>
				<button v-else class="shopping" size="mini" :plain="true" @click="addToCart">Add to Bag</button>
				<button v-if="flag" class="buy" size="mini" :plain="true" @click="goShop">点击购买</button>
				<button v-else class="buy" size="mini" :plain="true" @click="goShop">Purchase</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import store from '@/store/pop.js'; //需要引入弹框store
	import goodApi from '../../apis/goodApi.js'
	import style from "@/store/style.js"
	export default {
		name: "pop",
		data() {
			return {
				winHeight: '',
				goodMap: {
					goods_id: 18,
					shop_id: 4,
					language: "cn",
					platform: "pc",
					token: "0",
					ver: "0.5.0"
				},
				goodDetail: {},
				flag: style.state.flag
			};
		},
		computed: {
			show: {
				get: function() {
					if (store.state.show) {
						this.getGoodInfo();
					}
					return store.state.show
				},
				set: function(val) {
					

				},
				
			}
		},
		methods: {
			async addToCart() {
				let map = {
					"goods_id": this.goodDetail.goods_id,
					"goods": this.goodDetail
					// "name":this.goodDetail.name,
					// "name_en":this.goodDetail.name_en,
					// "img":this.goodDetail.carousel_image_list[0].image_url,
					// "size":this.goodDetail.sku[0].specification_list[0].specification_name,
					// "size_en":this.goodDetail.sku[0].specification_list[0].specification_name_en,
					// "flavor":this.goodDetail.sku[0].flavor_name,
					// "flavor_en":this.goodDetail.sku[0].flavor_name_en,
					// "proposal":this.goodDetail.sku[0].specification_list[0].proposal,
					// "proposal_en":this.goodDetail.sku[0].specification_list[0].proposal_en,
					// "price":this.goodDetail.sku[0].specification_list[0].price,
					// "stock":this.goodDetail.sku[0].specification_list[0].stock
				}
				const cart = uniCloud.importObject("cart")
				const res = await cart.addCart(map)
				if (res.id !== '') {
					uni.showToast({
						title: "添加成功",
						icon: "none"
					})
				}
				store.commit('change', false)

			},
			close() {
				store.commit('change', false)
			},
			async getGoodInfo() {
				if (style.state.flag) {
					this.goodMap.language = 'cn'
				} else {
					this.goodMap.language = 'en'
				}
				this.goodMap.shop_id = style.state.cityId
				this.goodMap.goods_id = store.state.goodsId
				const {
					data: res
				} = await goodApi.getGoodDetail(this.goodMap)
				this.goodDetail = res.data
				// console.log(res.data.carousel_image_list[0].image_url)	
			},
			goShop() {
				uni.removeStorageSync("cartList")
				let good = {
					"goods": this.goodDetail,
					"goods_id": this.goodDetail.goods_id,
					"number": 1,
					"totalPrice": this.goodDetail.sku[0].specification_list[0].price
				}
				let goods = [];
				goods.push(good)
				uni.setStorageSync("cartList", goods)
				uni.navigateTo({
					url: '/cart/cart-info/cart-info?goodsId=' + this.goodMap.goods_id
				})
			}
		},
		created() {
			let winHeight = wx.getSystemInfoSync().windowHeight
			this.winHeight = winHeight * 0.7 + 'px'
		}
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 100%;
		height: 38%;
		display: flex;
		align-items: center;
		justify-content: center;

		.pic {
			height: 87%;
			width: 96%;
			border-radius: 10px;
			object-fit: contain;
		}
	}

	.con {
		width: 100%;
		height: 46%;
		display: flex;
		justify-content: center;
		align-items: center;

		.introduce {
			display: flex;
			align-items: center;
			flex-direction: column;

			.taste {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.dimension {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}

	.footer {
		width: 100%;
		height: 17%;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-around;
		margin-left: 5px;

		.shopping {
			width: 150px;
		}

		.buy {
			width: 150px;
			background-color: black;
			color: white;
		}
	}
</style>